<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="../../css/Token_Start.css"/>
    <link rel="stylesheet" href="../../common/common.css"/>
    <style>
        .line-chose{
            margin:50px 0 40px;
        }
        .line-chose li.sport{
            height:24px;
            padding:2px 2%;
            background-color:#232c31 ;
        }
        .line-chose li{
            padding:10px 2%;
            border-bottom:1px solid #39464e;
        }
        .line-chose li .switch-open{
            float: right;
            display: inline-block;
            width:50px;
            height:10px;
           /* border:1px solid red;*/
        }
        .border-switch{
            width: 50px;
            height: 20px;
            border-radius: 10px;
            position: relative;
        }
        .border-dot{
            width: 18px;
            height: 18px;
            border-radius:  9px;
            position: absolute;
            background: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.4);
        }
        .open1{
            background: rgba(0,184,0,0.8);
        }
        .open2{
            top: 1px;
            right: 1px;
        }
        .close1{
            background: rgba(255,255,255,0.4);
            border:3px solid rgba(0,0,0,0.15);
            border-left: transparent;
        }
        .close2{
            left: 0;
            top: -1px;
            border:2px solid rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
<header>
    <a class="Token_Transaction" href="../../Token_Start.html"><img src="../../img/left.png" alt=""/></a>  添加行情
</header>
<div class="bo">
<div class="line-chose">
<!-- P网 -->
    <ul data-type="3" class="Pinter">
        <li class="sport">P网</li>
        <li>
            <span>ETH_BTC</span>
            <div class="switch-open">
                <div  class="close1 border-switch">
                    <div  class="close2 border-dot"></div>
                </div>
            </div>
        </li>
        <li>
            <span>USDT_REP</span>
            <div class="switch-open">
                <div  class="close1 border-switch">
                    <div  class="close2 border-dot"></div>
                </div>
            </div>
        </li>
        <li>
            <span>USDT_ETH</span>
            <div class="switch-open">
                <div  class="close1 border-switch">
                    <div  class="close2 border-dot"></div>
                </div>
            </div>
        </li>
        <li>
            <span>USDT_BTC</span>
            <div class="switch-open">
                <div  class="close1 border-switch">
                    <div  class="close2 border-dot"></div>
                </div>
            </div>
        </li>
        <li>
            <span>BTC_ZRX</span>
            <div class="switch-open">
                <div  class="close1 border-switch">
                    <div  class="close2 border-dot"></div>
                </div>
            </div>
        </li>
    </ul>
    <!-- 火币  -->
    <ul data-type="1" class="huobi">
        <li class="sport">Kraken</li>
        <li>
            <span>ETH_USD</span>
            <div class="switch-open">
                <div  class="close1 border-switch">
                    <div  class="close2 border-dot"></div>
                </div>
            </div>
        </li>
        <li>
            <span>REP_USD</span>
            <div class="switch-open">
                <div  class="close1 border-switch">
                    <div  class="close2 border-dot"></div>
                </div>
            </div>
        </li>
        <li>
            <span>ICN_BTC</span>
            <div class="switch-open">
                <div  class="close1 border-switch">
                    <div  class="close2 border-dot"></div>
                </div>
            </div>
        </li>
        <li>
            <span>ESO_BTC</span>
            <div class="switch-open">
                <div  class="close1 border-switch">
                    <div  class="close2 border-dot"></div>
                </div>
            </div>
        </li>
        <li>
            <span>MLN_BTC</span>
            <div class="switch-open">
                <div  class="close1 border-switch">
                    <div  class="close2 border-dot"></div>
                </div>
            </div>
        </li>
        <li>
            <span>ETH_EUR</span>
            <div class="switch-open">
                <div  class="close1 border-switch">
                    <div  class="close2 border-dot"></div>
                </div>
            </div>
        </li>
        <li>
            <span>GNO_BTC</span>
            <div class="switch-open">
                <div  class="close1 border-switch">
                    <div  class="close2 border-dot"></div>
                </div>
            </div>
        </li>
        <li>
            <span>GNO_ETH</span>
            <div class="switch-open">
                <div  class="close1 border-switch">
                    <div  class="close2 border-dot"></div>
                </div>
            </div>
        </li>
    </ul>
    <!-- B网  -->
    <ul data-type="2" class="Binter">
        <li class="sport">Binance</li>
        <li>
            <span>ZRX_BTC</span>
            <div class="switch-open">
                <div  class="close1 border-switch">
                    <div  class="close2 border-dot"></div>
                </div>
            </div>
        </li>
        <li>
            <span>SNT_BTC</span>
            <div class="switch-open">
                <div  class="close1 border-switch">
                    <div  class="close2 border-dot"></div>
                </div>
            </div>
        </li>
        <li>
            <span>KNC_BTC</span>
            <div class="switch-open">
                <div  class="close1 border-switch">
                    <div  class="close2 border-dot"></div>
                </div>
            </div>
        </li>
        <li>
            <span>QTUM_BTC</span>
            <div class="switch-open">
                <div  class="close1 border-switch">
                    <div  class="close2 border-dot"></div>
                </div>
            </div>
        </li>
        <li>
            <span>BNB_BTC</span>
            <div class="switch-open">
                <div  class="close1 border-switch">
                    <div  class="close2 border-dot"></div>
                </div>
            </div>
        </li>
        <li>
            <span>EOS_ETH</span>
            <div class="switch-open">
                <div  class="close1 border-switch">
                    <div  class="close2 border-dot"></div>
                </div>
            </div>
        </li>
        <li>
            <span>SNT_ETH</span>
            <div class="switch-open">
                <div  class="close1 border-switch">
                    <div  class="close2 border-dot"></div>
                </div>
            </div>
        </li>
        <li>
            <span>BNT_ETH</span>
            <div class="switch-open">
                <div  class="close1 border-switch">
                    <div  class="close2 border-dot"></div>
                </div>
            </div>
        </li>
        <li>
            <span>OAX_ETH</span>
            <div class="switch-open">
                <div  class="close1 border-switch">
                    <div  class="close2 border-dot"></div>
                </div>
            </div>
        </li>
    </ul>
</div>
</div>

<script src="../../js/jquery-3.2.1.min.js"></script>
<script src="../../js/Token_Start.js"></script>
<script>
    $().ready(function () {
    	$(".line-chose li").on("click",".switch-open",function(){
            var div1= $(this).find(".border-switch");
            var div2=$(this).find(".border-dot");
            
                if(div1.hasClass("close1")){
                    div1.removeClass("close1").addClass('open1');
                }else{
                    div1.removeClass("open1").addClass('close1');
                }
                if(div2.hasClass("close2")){
                    div2.removeClass("close2").addClass('open2');
                }else{
                    div2.removeClass("open2").addClass('close2');
                }  
                var trade=$(this).siblings("span").text();
                var type=$(this).parent().parent().data("type");
                var status=null;
                	div1.hasClass("close1")?status=2:status=1;
                	console.log(trade,type,status);
                	//提交ajax
                	 $.get("/app/user_quotation/setting",{"sport":type,"trade":trade,"status":status}) 
                
                
    })
    //
    	 $.ajax({
 			url:"/app/public/kiln?url=https://bittrex.com/api/v1.1/public/getmarkets",
 			//data:{url:"http://api.huobipro.com/market/history/kline?period=1day&size=100&symbol=btcusdt"},
 			success:function(r){
 				console.log(r)
 			}
 		})  
 		
    })
        
</script>

 
<script type="text/javascript">
	$(function(){
		$.ajax({
 			url:"/app/user_quotation/select",
 			success:function(r){
 				console.log(r);
 				if(r.code==0){
 					var data=r.list;
 					var huobi=[],Binter=[],Pinter=[];
 					console.time("at")
 					for(var i=0,len=r.list.length;i<len;i++){
 						var sport=data[i].type;
 						switch(sport){
 							case(1):huobi.push(data[i]);break;
 							case(2):Binter.push(data[i]);break;
 							case(3):Pinter.push(data[i]);break;
 						}
 					}
 					//火币
 					 for(var j=0,Hlen=huobi.length;j<Hlen;j++){
 						var market=huobi[j].qname;
 						$(".huobi>li:not(:first-child)").map(function(){
 							var span=$(this).children("span").text();
 							if(span==market){
 								$(this).find(".border-switch").addClass("open1").removeClass("close1");
 								$(this).find(".border-dot").addClass("open2").removeClass("close2");
 							}
 						})
 					} 
 					//B网
					for(var k=0,Hlen=Binter.length;k<Hlen;k++){
 						var market=Binter[k].qname;
 						$(".Binter>li:not(:first-child)").map(function(){
 							var span=$(this).children("span").text();
 							if(span==market){
 								$(this).find(".border-switch").addClass("open1").removeClass("close1");
 								$(this).find(".border-dot").addClass("open2").removeClass("close2");
 							}
 						})
 					}
 					//P网
					for(var l=0,Plen=Pinter.length;l<Plen;l++){
 						var market=Pinter[l].qname;
 						$(".Pinter>li:not(:first-child)").map(function(){
 							var span=$(this).children("span").text();
 							if(span==market){
 								$(this).find(".border-switch").addClass("open1").removeClass("close1");
 								$(this).find(".border-dot").addClass("open2").removeClass("close2");
 							}
 						})
 					}
					console.timeEnd("at");
 					
 				}else{
 					alert(r.msg);
 				}
 				
 			}
 		})
	})
</script>
</body>
</html>